Customizing the Dropzone User Control
Several properties let you customize the Dropzone user control’s behavior.
Letting Users Add Columns to a Dropzone
Use the AllowAddColumn property to let users add columns to a Dropzone.
<ucPageBuilder:DropZone ID="ucDropZone1" AllowAddColumn="true" AllowColumnResize="true" runat="server" />
For example, a Dropzone initially contains one column, but the page creator wants three. If this property is set to true, this change is possible.
This property’s default value is true.
Note: If you set dropzone’s column widths programmatically (as explained in Setting a Dropzone’s Column Widths Programmatically), the user will not be able to add a column, regardless of this setting.
Letting Users Resize a Dropzone
Use the AllowColumnResize property to let users change the width of columns in a Dropzone.
<ucPageBuilder:DropZone ID="ucDropZone1" AllowAddColumn="true" AllowColumnResize="true" runat="server" />
For example, column width is 100% by default. A page creator wants to change it to 50%. If this property is set to true, this change is possible.
This property’s default value is true.
Note: If you set dropzone’s column widths programmatically (as explained in Setting a Dropzone’s Column Widths Programmatically), the user will not be able to add a column, regardless of this setting.
Setting a Dropzone’s Column Widths Programmatically
If you want to set a dropzone’s column widths programmatically, follow these steps.
1. Add the following Register statement to the page’s <head> tags.
<%@ Register Assembly="Ektron.Cms.Widget" Namespace="Ektron.Cms.PageBuilder" TagPrefix="PB" %>
Warning! The Widget and Dropzone assemblies must have the same Tag Prefix. See example.
<%@ Register Src="~/Workarea/PageBuilder/PageControls/PageHost.ascx" TagPrefix="PB" TagName="PageHost" %>
<%@ Register Src="~/Workarea/PageBuilder/PageControls/DropZone.ascx" TagPrefix="PB" TagName="DropZone" %>
<%@ Register Assembly="Ektron.Cms.Widget" Namespace="Ektron.Cms.PageBuilder" TagPrefix="PB"%>
2. Within the page’s <body> tags, add the following code. The following example adds three columns of 100 pixels each.
<PB:DropZone ID="Middle" runat="server">
<ColumnDefinitions>
<PB:ColumnData width="100" columnID="0" unit="pixels"></PB:ColumnData>
<PB:ColumnData width="100" columnID="1" unit="pixels"></PB:ColumnData>
<PB:ColumnData width="100" columnID="2" unit="pixels"></PB:ColumnData>
</ColumnDefinitions>
</PB:DropZone>
Set width to an appropriate number. For the unit, the options are
pixels
percent
em
If you set a dropzone’s column widths programmatically, you must also set the AllowAddColumn and AllowColumnResize properties to false. If you do not, users working with widgets can add columns and adjust column widths on the page, but their changes will revert to these settings when they try to save.
